# Calendar

## Installation
`npm i @snack-uikit/calendar`

[Changelog](./CHANGELOG.md)

## Example

```tsx
import { Calendar } from '@snack-uikit/calendar';

<Calendar
  mode='date'
  onChangeValue={(selectedDate: Date) => {
    // do something
  }}
/>

<Calendar
  mode='range'
  onChangeValue={(selectedRange: [Date, Date]) => {
    // do something
  }}
/>
```

[//]: DOCUMENTATION_SECTION_START
[//]: THIS_SECTION_IS_AUTOGENERATED_PLEASE_DONT_EDIT_IT
## Calendar
### Props
| name | type | default value | description |
|------|------|---------------|-------------|
| mode* | "date" \| "range" | - | Режим работы календаря: <br> - `date` - режим выбора даты <br> - `range` - режим выбора периода |
| size | enum Size: `"s"`, `"m"`, `"l"` | m | Размер |
| today | `number \| Date` | - | Дата сегодняшнего дня |
| showHolidays | `boolean` | - | Раскрашивает субботу и воскресенье |
| buildCellProps | `(date: Date, viewMode: ViewMode) => { isDisabled?: boolean; isHoliday?: boolean };` | - | Колбек установки свойств ячеек календаря. Вызывается на построение каждой ячейки. Принимает два параметра: <br> `Date` - дата ячейки <br> `ViewMode`: <br>  - `month` отображение месяца, каждая ячейка - 1 день <br>  - `year` отображение года, каждая ячейка - 1 месяц <br>  - `decade` отображение декады, каждая ячейка - 1 год <br><br> Колбек должен возвращать объект с полями, отвечающими за отключение и подкраску ячейки. |
| className | `string` | - | CSS-класс контейнера |
| fitToContainer | `boolean` | true | Отключает предустановленный размер, заставляя компонент подстраиваться к размеру контейнра: (width: 100%, height: 100%). |
| style | `CSSProperties` | - | Объект со стилями на контейнер. |
| autofocus | `boolean` | - | Автофокус |
| locale | `Intl.Locale` | Проставляется в соответствие с языком в настройках браузера | Локаль, в соответствие с которой выставляется язык названий и первый день недели |
| onFocusLeave | `(direction: FocusDirection) => void` | - | Колбек потери фокуса. Вызывается со значением `next`, когда фокус покидает компонент, передвигаясь вперед, по клавише `tab`. Со значением `prev` - по клавише стрелки вверх или `shift + tab`. |
| navigationStartRef | `RefCallback<HTMLButtonElement>` | - | Ref-callback на первый доступный интерактивный элемент |
| value | `Date \| Range` | - | Выбранное значение.<br> - в режиме date тип `Date` <br> - в режиме range тип `Range` (`[Date, Date]`) |
| defaultValue | `Date \| Range` | - | Значение по-умолчанию для uncontrolled.<br> - в режиме date тип `Date` <br> - в режиме range тип `Range` (`[Date, Date]`) |
| onChangeValue | `((value: Date) => void) \| ((value: Range) => void)` | - | Колбек выбора значения.<br> - в режиме date принимает тип `Date` <br> - в режиме range принимает тип `Range` |


[//]: DOCUMENTATION_SECTION_END
